import React from 'react'
import './index.scss'
import NavHeader from '@/components/NavHeader/index'
import styles from './index.module.scss'
import { getAreaMapApi } from '@/api/area'
import { getHousesListApi } from '@/api/house'
import { Link } from 'react-router-dom'
import { Toast } from 'antd-mobile'
import HouseItem from '@/components/HouseItem/index'

export default class Map extends React.Component {
  state = {
    housesList: [],
    isShowList: false
  }
  componentDidMount () {
    this.initMap()
  }
  // 初始化地图
  initMap = () => {
    const { label, value } = JSON.parse(localStorage.getItem('hkzf_city'))
    console.log(label, value)
    // 初始化实例
    const map = new window.BMapGL.Map('container')
    // 把组件挂载到实例上
    this.map = map
    // 创建地址解析器实例
    const myGeo = new window.BMapGL.Geocoder()
    // 将地址解析结果显示在地图上，并调整地图视野
    myGeo.getPoint(
      label,
      async point => {
        if (point) {
          // 地图初始化，同时设置地图展示级别
          map.centerAndZoom(point, 11)
          // 显示一个中心点
          // map.addOverlay(new window.BMapGL.Marker(point))
          // 右下角的放大缩小按钮
          map.addControl(new window.BMapGL.NavigationControl())
          // 底部的比例尺
          map.addControl(new window.BMapGL.ScaleControl())
          // 调用封装好的方法来执行
          this.renderOverlays(value)
        }
      },
      label
    )

    // 添加地图的监听事件，只要地图移动，如果有房屋列表，就让房屋列表消失
    map.addEventListener('movestart', () => {
      if (this.state.isShowList) {
        this.setState({
          isShowList: false
        })
      }
    })
    // 老版本写死的数据，现在都不需要了
    // 初始化中心点
    // const point = new window.BMap.Point(116.404, 39.915)
    // 地图初始化，同时设置地图展示级别
    // map.centerAndZoom(point, 11)
  }
  // 接收区域id,根据改参数获取房源数据
  async renderOverlays (id) {
    Toast.loading('加载中', 0, null, true)
    // const { data: res } = await axios({
    //   method: 'get',
    //   // url: 'https://api-haoke-web.itheima.net/area/map',
    //   // url: `${BASE_URL}/area/map`,注意这个是反引号
    //   url: `/area/map`,
    //   params: {
    //     id: id
    //   }
    // })
    const { data: res } = await getAreaMapApi(id)
    Toast.hide()
    // console.log(res)
    const data = res.body
    // 调用 getTypeAndZoom 方法获取级别和类型
    const { nextZoom, type } = this.getTypeAndZoom()
    // console.log(nextZoom, type)
    // 获取到的小区数据就是item
    data.forEach(item => {
      this.createOverlays(item, nextZoom, type)
    })
  }
  // 计算要绘制的覆盖物的类型和下一个缩放的级别
  // 区 --> 11 ，范围 >= 10 < 12
  // 镇 --> 13 , 范围 >= 12 < 14
  // 小区 --> 15，范围 >= 14 < 16
  getTypeAndZoom () {
    const zoom = this.map.getZoom()
    // console.log('获取的zoom',zoom);
    let nextZoom, type
    // console.log('当前地图缩放级别：', zoom)
    if (zoom >= 10 && zoom < 12) {
      // 区
      // 下一个缩放级别
      nextZoom = 13
      // circle 表示绘制圆形覆盖物（区、镇）
      type = 'circle'
    } else if (zoom >= 12 && zoom < 14) {
      // 镇
      nextZoom = 15
      type = 'circle'
    } else if (zoom >= 14 && zoom < 16) {
      // 小区
      type = 'rect'
    }
    return {
      nextZoom,
      type
    }
  }

  // 创建覆盖物方法的封装
  createOverlays (data, zoom, type) {
    const {
      coord: { longitude, latitude },
      label: areaName,
      count,
      value
    } = data
    // 创建覆盖物
    const areaPoint = new window.BMapGL.Point(longitude, latitude)

    if (type === 'circle') {
      // 区或镇
      this.createCircle(areaPoint, areaName, count, value, zoom)
    } else {
      // 小区
      this.createRect(areaPoint, areaName, count, value)
    }
  }

  // createCircle() 创建区、镇覆盖物方法的封装
  createCircle (point, name, count, id, zoom) {
    // 创建覆盖物
    const label = new window.BMapGL.Label('', {
      position: point,
      offset: new window.BMapGL.Size(-35, -35)
    })
    // 给 label 对象添加一个唯一标识
    label.id = id

    // 设置房源覆盖物内容
    label.setContent(`
    <div class="${styles.bubble}">
      <p class="${styles.name}">${name}</p>
      <p>${count}套</p>
    </div>
  `)
    // 设置样式
    const labelStyle = {
      cursor: 'pointer',
      border: '0px solid rgb(255, 0, 0)',
      padding: '0px',
      whiteSpace: 'nowrap',
      fontSize: '12px',
      color: 'rgb(255, 255, 255)',
      textAlign: 'center'
    }
    label.setStyle(labelStyle)
    label.addEventListener('click', () => {
      // 调用 renderOverlays 方法，获取该区域下的房源数据
      this.renderOverlays(id)
      // 放大地图，以当前点击的覆盖物为中心放大地图
      this.map.centerAndZoom(point, zoom)
      // 解决清除覆盖物时，百度地图API的JS文件自身报错的问题
      setTimeout(() => {
        this.map.clearOverlays()
      }, 0)
    })
    // 添加覆盖物到地图中
    this.map.addOverlay(label)
  }

  // createRect() 创建小区覆盖物方法的封装
  // 创建小区覆盖物
  createRect (point, name, count, id) {
    // 创建覆盖物
    const label = new window.BMapGL.Label('', {
      position: point,
      offset: new window.BMapGL.Size(-50, -28)
    })

    // 给 label 对象添加一个唯一标识
    label.id = id

    // 设置房源覆盖物内容
    label.setContent(`
      <div class="${styles.rect}">
        <span class="${styles.housename}">${name}</span>
        <span class="${styles.housenum}">${count}套</span>
        <i class="${styles.arrow}"></i>
      </div>
    `)
    // 这些样式在css中设置之后，这里就可以不用再重新设置了，可以直接删除
    // const labelStyle = {
    //   cursor: 'pointer',
    //   border: '0px solid rgb(255, 0, 0)',
    //   padding: '0px',
    //   whiteSpace: 'nowrap',
    //   fontSize: '12px',
    //   color: 'rgb(255, 255, 255)',
    //   textAlign: 'center'
    // }
    // 设置样式
    // label.setStyle(labelStyle)

    // 添加单击事件
    label.addEventListener('click', e => {
      // console.log('小区被点击了', e.domEvent)
      // console.log(id)
      this.getHousesList(id)
      // 获取当前被点击的小区坐标
      const target = e.domEvent.changedTouches[0]
      // 移动小区位置到地图中间
      this.map.panBy(
        window.innerWidth / 2 - target.clientX,
        (window.innerHeight - 300) / 2 - target.clientY
      )
    })

    // 添加覆盖物到地图中
    this.map.addOverlay(label)
  }

  // 获取小区的房源数据
  async getHousesList (id) {
    Toast.loading('加载中', 0, null, true)
    // const res = await axios.get(`http://8.131.91.46:8009/houses?cityId=${id}`)
    // const res = await axios({
    //   method: 'get',
    //   url: '/houses',
    //   params: {
    //     cityId: id
    //   }
    // })
    let param = {
      cityId: id
    }
    const res = await getHousesListApi(param)
    Toast.hide()
    console.log('获取的小区数据', res)
    this.setState({
      housesList: res.data.body.list,
      isShowList: true // 展示房源列表
    })
  }

  // 渲染房屋列表的方法
  renderHousesList = () => {
    return this.state.housesList.map(item => (
      <HouseItem
        key={item.houseCode}
        houseImg={item.houseImg}
        title={item.title}
        desc={item.desc}
        tags={item.tags}
        price={item.price}
      />
    ))
  }

  render () {
    return (
      <div className='map'>
        {/* <div className='test'>ceshi</div> */}
        <NavHeader>地图找房</NavHeader>
        <div id='container'></div>
        <div
          className={[
            styles.houseList,
            this.state.isShowList ? styles.show : ''
          ].join(' ')}
        >
          <div className={styles.titleWrap}>
            <h1 className={styles.listTitle}>房屋列表</h1>
            <Link className={styles.titleMore} to='/home/list'>
              更多房源
            </Link>
          </div>
          <div className={styles.houseItems}>
            {/* 房屋结构 */}
            {this.renderHousesList()}
          </div>
        </div>
      </div>
    )
  }
}
